<template>
	<div class="body">
		<!-- 左边一级导航 -->
		<div class="body_left">
			<classifyLeft v-for="(item,index) in firstLevel" :key="index" :item="item" :UpdateIndex="UpdateIndex"
			 :index="index" @ChangeUpdateIndex="ChangeUpdateIndex" />
			<!-- <div v-for="(item,index) in this.$store.state.firstLevel" :key="index">
				 {{item.name}}
			 </div> -->
		</div>

		<!-- 右边二级导航 -->
		<div class="body_right">
			<div class="body_right_item">
				<classifyRight v-for="(item,index) in secondLevel" :key="index" :item="item" />
			</div>
		</div>
	</div>
</template>

<script>
	import classifyLeft from '../components/classifyLeft'
	import classifyRight from '../components/classifyRight'
	export default {
		components: {
			classifyLeft,
			classifyRight
		},
		data() {
			return {
				UpdateIndex: 0
			}
		},
		mounted() {
			 var a = this.$store.dispatch("Get_data");
			 console.log(a)
		},
		computed: {
			categoryItems: function() {
				return this.$store.state.catStore.category
			},
			firstLevel: function() {
				return this.$store.state.catStore.firstLevel
			},
			secondLevel: function() {
				return this.$store.state.catStore.secondLevel
			}
		},
		methods: {
			ChangeUpdateIndex(index) {
				this.UpdateIndex = index;
				var tempItem = this.firstLevel[this.UpdateIndex];
				this.$store.dispatch("Get_data_two", tempItem);
			}
		}
	}
</script>

<style scoped>
	.body {
		width: 100%;
		height: 100vh;
		display: flex;
	}

	.body_left {
		height: 100vh;
		width: 23%;
		border: 1px solid red;
	}

	.body_right {
		height: 100vh;
		width: 76%;
		border: 1px solid green;
	}

	.body_left_item {
		width: 100%;
		height: 6vh;
		border: 1px solid black;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
